<!--  -->
<template>
<div class='backs'>
  <div class='backstage'>
    <div class="backstage_title">
      <div class="backstage_title_switch">
         <span class="backstage_mess">app权限:</span>
         <i-switch size="large" v-model="isSwitch">
            <span slot="open">开启</span>
            <span slot="close">关闭</span>
         </i-switch>  
      </div>
      <!-- <div class="backstage_tabs">
          <span @click="changetabType('router')" :class="['backstage_tabs_left',tabType == 'router'?'active':''] ">菜单权限</span>
          <span @click="changetabType('button')" :class="['backstage_tabs_left',tabType != 'router'?'active':'']">按钮权限</span>
      </div> -->
    </div>
    <div class="backstage_boxList">
      <div class="backstage_mainBox">
        <div v-for="(item,index) in appList" :key="item.id" :class="['backstage_boxs',item.pageUp?'active':'']">
          <Icon type="ios-arrow-up" @click="pagesFold(item,index)" v-if="item.childPermission && item.childPermission.length>0" class="backstage_boxs_firstUp" />
          <div v-if="item.mutex">
            <Checkbox   v-for="mutex in item.mutexList" :key="mutex.id"  @on-change="radioChange(mutex.permissionTitle,item,'title')"   v-model="mutex.selected">
              <span class="backstage_boxs_RadioFirst" >{{mutex.permissionTitle}}</span>
            </Checkbox>
          </div>
          <h2 v-if="!item.mutex" >
            <Checkbox v-model="item.selected" @on-change="checkboxed(item)" class="firstCheckbox"></Checkbox>{{item.permissionTitle}}
          </h2>  
          <div v-for="it in item.childPermission" :key="it.id" :class="[(it.childPermission && it.childPermission.length>0) || (it.mutexList && it.mutexList.length>0)?'backstage_boxs_thirsBox':'disLine']">
                <div v-if="it.mutexList && it.mutexList.length>0">
                     <!-- <RadioGroup @on-change="radioChange(it.permissionTitle,it)" v-model="it.permissionTitle">
                         <Radio class="backstage_boxs_titleSecond radioRight"  @on-change="radioChange1(it.permissionTitle,it)" v-for="mutex in it.mutexList" :key="mutex.id" :value="mutex.id" :label="mutex.permissionTitle"></Radio>
                     </RadioGroup> -->
                    <Checkbox class="backstage_boxs_titleSecond radioRight" v-model="mutex.selected" @on-change="radioChange(mutex.id,it)" v-for="mutex in it.mutexList" :key="mutex.id">
                      <span class="backstage_boxs_titleSecondMess" >{{mutex.permissionTitle}}</span> 
                    </Checkbox>
                    <Divider v-if="it.currentDate.childPermission && it.currentDate.childPermission.length>0" :dashed="true" />
                    <div class="backstage_boxs_thirsBox_allselected" v-if="it.currentDate.childPermission && it.currentDate.childPermission.length>0">
                        <span class="backstage_boxs_thirsBox_allselectedMess">全选</span>
                        <Checkbox @on-change="checkboxAlled(it.currentDate)"></Checkbox>
                    </div>
                    <span class="backstage_boxs_spans" v-for="mess in it.currentDate.childPermission" :key="mess.id">
                      <Checkbox v-model="mess.selected" @on-change="checkboxed(mess)"></Checkbox>{{mess.permissionTitle}}
                    </span>
                </div>
                <div  v-else>
                    <h3 class="backstage_boxs_titleSecond">
                     <Checkbox v-model="it.selected" @on-change="checkboxed(it)" class="secondCheckbox"></Checkbox>
                     {{it.permissionTitle}}
                    </h3> 
                    <Divider v-if="it.childPermission && it.childPermission.length>0" :dashed="true" />
                    <div class="backstage_boxs_thirsBox_allselected" v-if="it.childPermission && it.childPermission.length>0">
                        <span class="backstage_boxs_thirsBox_allselectedMess">全选</span>
                        <Checkbox @on-change="checkboxAlled(it)"></Checkbox>
                    </div>
                    <span class="backstage_boxs_spans" v-for="mess in it.childPermission" :key="mess.id">
                      <Checkbox v-model="mess.selected" @on-change="checkboxed(mess)"></Checkbox>{{mess.permissionTitle}}
                    </span>
                </div>
               
          </div>
        </div>
      </div>  
      <div class="backstage_footTabs">
           <span class="backstage_footTabs_sure" @click="summitMess">保存</span>
           <span class="backstage_footTabs_clear" @click="emptyAllSelected">清空</span>
       </div>
    </div>
    
  </div>
   
</div>
  
</template>

<script>
import {Divider,Panel,Collapse  } from "view-design";
import {getTreeList, getTreeUpdate, getRoleUpdate} from '@/api/system_center'
export default {
components: {Divider,Panel,Collapse},
data() {
 return {
    tabType:'router',
    routerListAfter:[],
    appList:[],
    single:"",
    isSwitch:false
 };
},
computed: {},
watch: {
  tabType(mess){
    this.boxAddAuto()
    this.boxAddHeight();
  }
},
created() {
  let {id, app} = this.$route.query;
  this.isSwitch = app == 1?true:false;
  this.app = app;
  this.id = id;
  this.getBackstage()
},
mounted() {
},
methods: {
  //获取后台权限类表
 getBackstage(mess={}){
   //1001企业后台菜单,1002企业后台字段,1003企业后台按钮,2001APP菜单,2002APP功能,
	   let params = {roleId:this.id, clientType:2, permissionTypes:[2001,2002]};
     params = Object.assign(params,mess);
     getTreeList(params).then(res=>{
     console.log("权限列表1",res)
     this.changeList(res);
     let list = this.changeSortList(res);
     console.log("权限22222222",list)
     this.appList =list;
      console.log("权限列表2",res)
	   this.boxAddHeight();
 })
 },
  changetabType(name){
    this.tabType = name;  
  },
  //清空所以选中的
   emptyAllSelected(){
    this.recursiveArray(this.appList)
   },
   //递归循环
   recursiveArray(arr){
       arr.map(item=>{
         item.selected = false;
         item.childPermission && this.recursiveArray(item.childPermission)
         item.mutexList &&  this.recursiveArray(item.mutexList);
         let index = this.routerListAfter.findIndex(items => items == item.id);
         this.routerListAfter.splice(index,1);

       })
     console.log(this.routerListAfter)
   },
  //改变排版
  changeSortList(list){
    let arr = [];
    list.forEach(item=>{
      if(!item.mutex)arr.push(item);
      else {
        let index = arr.findIndex(it=>it.mutex == item.mutex);
        if(index>=0){
          if(item.selected){
            arr[index].currentId = item.currentId;
            arr[index].permissionTitle = item.permissionTitle,
            arr[index].currentDate = item
          }
          arr[index].mutexList.push(item);
        }else arr.push({
          mutex:item.mutex,
          currentId:item.selected?item.id:'',
          mutexList:[item],
          permissionTitle:item.selected?item.permissionTitle:'',
          currentDate:item.selected?item:''
        })
      }
      item.childPermission && item.childPermission.length>0 && (item.childPermission = this.upArray(item.childPermission))
    })
    return arr;
  },
  //将没有值的放上面  
  upArray(mess){
    let arr = [],arr1=[],arr2=[];
    mess.map(item=>{
      if(!item.mutex && (!item.childPermission || item.childPermission.length<1))arr.push(item);
      else if(!item.mutex && item.childPermission && item.childPermission.length>0)arr1.push(item);
      else {
        let index = arr2.findIndex(it=>it.mutex == item.mutex);
        if(index>=0){
          console.log(6666,item.selected)
          if(item.selected){
            arr2[index].currentId = item.currentId;
            arr2[index].permissionTitle = item.permissionTitle;
            arr2[index].currentDate = item
          }
          arr2[index].mutexList.push(item);
         
        }else arr2.push({
          mutex:item.mutex,
          currentId:item.selected?item.id:'',
          mutexList:[item],
          permissionTitle:item.selected?item.permissionTitle:'',
          currentDate:item.selected?item:''
        })
      }
    })
    return [...arr,...arr2,...arr1];
  },
 //将选中放进数组里面
  checkboxed(item){
    let {selected,id} = item;
    let index = this.routerListAfter.findIndex(item=>item == id);
    selected && index<0 ? this.routerListAfter.push(id) : !selected && index>=0 ? this.routerListAfter.splice(index,1):"";
    console.log(this.routerListAfter)
  },
   //将选中放进数组里面
  checkboxed2(item){
    let {selected,id} = item;
    let index = this.routerListAfter.findIndex(item=>item == id);
    selected && index<0 ? this.routerListAfter.push(id) : selected && index>=0 ? this.routerListAfter.splice(index,1):"";
    console.log(this.routerListAfter)
  },
  //单选切换
  radioChange(id, mess, flag){
    console.log(id, mess)
    let arr ={};
    let {mutexList} =  mess;
    flag === 'title' && (id =  mutexList.find(it=>it.permissionTitle == id).id);
    console.log(id, mess)
    mutexList.forEach(item=>{
       if(item.id !== id)item.selected = false;
       else  {mess.currentDate = item;item.selected = true}
       this.checkboxed2(item)
    })
    //mess.currentDate = arr;
      this.boxAddAuto();
  },
  radioChange1(value, mess){
    console.log(66,value, mess)
  },
   //将selected变成布尔值
   changeList(mess){
      mess.map(item=>{
          let {selected} = item
          item.selected = selected == "true";
          selected == "true" && this.routerListAfter.push(item.id);
          if(item.childPermission)this.changeList(item.childPermission)
      })
   },
   pagesFold(item,index){
    
   // doxs.style.height = "71px"
     item.pageUp = item.pageUp?false:true;
     this.routerList.splice(index,1,item)
     console.log(item)
   },
  checkboxAlled(mess){
    mess.ifAllselected = mess.ifAllselected?false:true;
    mess.childPermission.map(item=>{
        item.selected = mess.ifAllselected;
        this.checkboxed(item)
    })
  },
  //点击确认按钮
  summitMess(){
    this.changeControl();
	  let permissionTypes =[2001,2002],
	  allPermissions = this.routerListAfter;
	  getTreeUpdate({roleId:this.id, clientType:2, permissionTypes, allPermissions,}).then(res=>{
      this.$Message.success("修改成功")
      this.getBackstage();
      this.routerListAfter= [];
	  })
  },
  //权限发生变化 掉接口
  changeControl(){
    let isSwitch = this.isSwitch?'1':'2',{id,web}=this.$route.query
    getRoleUpdate({loginApp: isSwitch,roleId:this.id}).then(res=>{
    this.$Message.success("权限修改成功");
     this.$router.push({path:`/system_center/roleControl/roleControling`,query:{
      id,
      web,
      app:isSwitch,
    }})
	 }).catch(err=>this.$Message.error("权限修改失败"))
  },
  //给每一个div添加高度
  boxAddHeight(){
    setTimeout(_=>{
       let doxs = document.querySelectorAll(".backstage_boxs");
      [...doxs].map(dox=>{
          dox.clientHeight>120 && (dox.style.height = dox.clientHeight+"px")
      })
    },1000)
    
  },
  //切换之前给每一个div的高度变成auto
  boxAddAuto(){
     let doxs = document.querySelectorAll(".backstage_boxs");
      [...doxs].map(dox=>{
          dox.style.height = 'auto'
      })
  }
},

}
</script>
<style lang='scss' scoped>
.backs{
    max-height: 100%;
    overflow-y: auto;
    height: 100%;
 .backstage{
    padding:0 24px;
    height: calc(100% - 3px);
    /deep/.ivu-divider-horizontal{
      margin: 12px 0;  
    }
    &_boxList{
      height: calc(100% - 47px);
      max-height: calc(100% - 47px);
      overflow-y: auto;  
    }
    &_mainBox{
     // max-height: calc(100% - 32px);
      min-height: calc(100% - 94px);
     // overflow-y: auto;  
    }
    &_mess{
        margin-right: 20px;
    }
    &_tabs{
      width: 260px;
      height: 32px;
      background: #f2f4f7;
      border-radius: 16px;
      color: #000;
      display: inline-block;
      &_left{
        width: 130px;
        height: 32px;
        display: inline-block;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
      }
      &_left.active{
        background: #ffffff;
        border: 1px solid #2298ff;
        border-radius: 16px; 
        color: #0088FF;
        font-weight: 700; 
      }
    }
    &_title{
        text-align: left;
        margin-bottom: 15px;
        &_switch{
        }
    }
    &_boxs.active{
      height: 71px!important;
      .backstage_boxs_firstUp{
        transform: rotate(180deg);  
      }
    }
    &_boxs{
      background: #ffffff;
      border-radius: 2px;
      box-shadow: 0px 0px 6px 0px rgba(38,42,45,0.08);  
      margin: 5px 0; 
      padding: 20px 0 20px 30px;
      position: relative;
      transition: all .5s;
      overflow: hidden;
      &_spans{
        display: inline-block;
        width: 140px;
        line-height: 24px;
        margin-bottom: 10px;
      }
     &_titleSecond{
      font-weight: 700;
      margin-top: 18px;   
     }
     &_titleSecondMess{
       margin-left: 8px;
     }
     &_thirsBox{
       position: relative;
       margin-left: 25px;
       &_allselected{
         position: absolute;
         right: 9px;
         top: 13px;
       }
       &_allselectedMess{
           margin-right: 4px;
       } 
     }
     &_firstUp{
        //color: #ccc; 
        position: absolute;
        right: 20px;
        top: 25px;
        cursor: pointer; 
        transform: rotate(0deg);
        transition: all .5s;
     } 
     &_RadioFirst{
       font-size: 18px;
       font-weight: 700;
       margin-right: 20px;
       padding-left: 9px;
     } 
    }
    &_footTabs{
      margin-top: 14px;
      padding: 20px 0;
      text-align: center;
      background: #f0f2f5;
    //   width: 100%;
    //   bottom: 0;
    //   position: absolute;
      &_sure{
       width: 140px;
       height: 34px;
       background: #2298ff;
       border-radius: 2px;
       margin-right: 20px;
       color: #fff;
       text-align: center;
       line-height: 34px;
       display: inline-block;
       cursor: pointer;
      }
      &_clear{
        width: 120px;
        height: 34px;
        background: #ffffff;
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: 2px;
        text-align: center;
        line-height: 34px;
        display: inline-block;
        cursor: pointer;
      }
    }
    .firstCheckbox{
       float: left;
       margin-top: 6px; 
    }
    .secondCheckbox{
       float: left;
    }
  }
 .disLine{
   display: inline-block;
   margin-right: 22px;
   margin-left: 25px;
   .backstage_boxs_titleSecond{
     display: inline-block;
   }
   
 }
 .radioRight{
   margin-right: 20px;
   font-size: 16px;
 } 
}
 
</style>